<%@ page language="java" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"></meta>
    <title>购物车</title>
    <link rel="stylesheet" type="text/css" href="/css/index.css" />
    <script type="text/javascript" src="/js/jquery-3.7.1.min.js"></script>
    <style>
        /* 购物车样式 */
        .cart-container {
            width: 100%;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            padding: 20px;
            margin-bottom: 30px;
        }
        
        .cart-title {
            font-size: 24px;
            color: #333;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
        }
        
        .cart-header {
            display: flex;
            background-color: #f8f8f8;
            padding: 12px 0;
            border-radius: 4px;
            font-weight: bold;
            color: #333;
        }
        
        .cart-item {
            display: flex;
            padding: 20px 0;
            border-bottom: 1px solid #eee;
            align-items: center;
        }
        
        .cart-col {
            padding: 0 10px;
            text-align: center;
        }
        
        .product-info {
            flex: 3;
            display: flex;
            align-items: center;
            text-align: left;
        }
        
        .product-img {
            width: 80px;
            height: 80px;
            object-fit: cover;
            margin-right: 15px;
            border-radius: 4px;
        }
        
        .product-name {
            font-size: 16px;
            color: #333;
        }
        
        .product-price {
            flex: 1;
            color: #e4393c;
            font-weight: bold;
        }
        
        .product-quantity {
            flex: 1;
        }
        
        .quantity-control {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 120px;
            margin: 0 auto;
        }
        
        .quantity-btn {
            width: 30px;
            height: 30px;
            background-color: #f5f5f5;
            border: 1px solid #ddd;
            font-size: 16px;
            cursor: pointer;
        }
        
        .quantity-input {
            width: 50px;
            height: 30px;
            text-align: center;
            border: 1px solid #ddd;
            margin: 0 5px;
        }
        
        .product-total {
            flex: 1;
            color: #e4393c;
            font-weight: bold;
        }
        
        .product-action {
            flex: 1;
        }
        
        .delete-btn {
            padding: 5px 10px;
            background-color: #f5f5f5;
            border: 1px solid #ddd;
            border-radius: 4px;
            cursor: pointer;
            color: #666;
        }
        
        .delete-btn:hover {
            background-color: #e4393c;
            color: #fff;
            border-color: #e4393c;
        }
        
        .cart-summary {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            margin-top: 20px;
            padding-top: 20px;
            border-top: 1px solid #eee;
        }
        
        .cart-total {
            margin-right: 20px;
            font-size: 18px;
        }
        
        .total-price {
            color: #e4393c;
            font-weight: bold;
            font-size: 24px;
        }
        
        .checkout-btn {
            padding: 10px 30px;
            background-color: #e4393c;
            color: #fff;
            border: none;
            border-radius: 4px;
            font-size: 18px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        
        .checkout-btn:hover {
            background-color: #c1272d;
        }
    </style>
    <script type="text/javascript">
        //用于用户中心左边菜单栏的选择项的样式
        function setSelectedClass(url){
            $('div.cont ul.list li a[href~="'+url+'"]').parent().addClass("current");
        }
        $(function(){
            $('.mycart').hover(
                function(){
                    $('#div_mycart').show('slow');
                },
                function(){
                    $('#div_mycart').hide('slow');
                }
            );
        });
        $(function() {
            $('.allsort').hover(function() {
                $('#div_allsort').show();
            }, function() {
                $('#div_allsort').hide();
            });
        });


    </script>
</head>
<body class="index">
<div class="container">
    <div class="header">
        <h1 class="logo">
            <a title="" style="background:url(images/logo.png);" href="/">电子商务平台</a>
        </h1>
        <ul class="shortcut">
            <li class="first"><a href="ucenter">我的账户</a></li>
            <li><a href="ucenter/order">我的订单</a></li>
            <li class='last'><a href="">使用帮助</a></li>
        </ul>
        <p class="loginfo">
            <c:if test="${not empty sessionScope.user}">
                ${user.account}您好，欢迎您来到${site}购物！[<a href="/logout" class="reg">安全退出</a>]
            </c:if>
            <c:if test="${empty sessionScope.user}">
                [<a href="/login">登录</a>
                <a class="reg" href="/register">免费注册</a>]
            </c:if>
        </p>
    </div>
    <div class="navbar">
        <ul>
            <li><a href="">首页</a></li>
        </ul>

    </div>
    <div class="searchbar">
        <div class="allsort">
            <a href="javascript:void(0);">全部商品分类</a>

            <!--总的商品分类-开始-->
            <ul class="sortlist" id='div_allsort' style='display:none'>



                <li>
                    <h2>
                        <a href ="">数码家电</a>
                    </h2>
                </li>
                <li>
                    <h2>
                        <a href ="">衣服首饰</a>
                    </h2>
                </li>
                <li>
                    <h2>
                        <a href ="">零食</a>
                    </h2>
                </li>
            </ul>
        </div>

        <div class="searchbox">
            <form method='get' action=''>
                <input type='hidden' name='controller' value='site' /> <input
                    type='hidden' name='action' value='search_list' /> <input
                    class="text" type="text" name='word' autocomplete="off"
                    value="输入关键字..." /> <input class="btn" type="submit" value="商品搜索"
                                                    onclick="checkInput('word','输入关键字...');" />
            </form>

        </div>
        <div class="hotwords">热门搜索：</div>
    </div>

    <div class="wrapper clearfix">
        <div class="wrap_box">
           <!-- 购物车商品列表 -->
           <div class="cart-container">

               
               <div class="cart-header">
                   <div class="cart-col product-info">商品信息</div>
                   <div class="cart-col product-price">单价</div>
                   <div class="cart-col product-quantity">数量</div>
                   <div class="cart-col product-total">小计</div>
                   <div class="cart-col product-action">操作</div>
               </div>
               
               <div class="cart-items">
                   <!-- 购物车商品项 1 -->
                   <div class="cart-item">
                       <div class="cart-col product-info">
                           <img src="images/goods/apple.jpg" alt="苹果手机" class="product-img">
                           <div class="product-name">苹果（Apple）iPhone 6 (A1586) 64GB</div>
                       </div>
                       <div class="cart-col product-price">￥5688</div>
                       <div class="cart-col product-quantity">
                           <div class="quantity-control">
                               <button class="quantity-btn minus" onclick="updateQuantity(1, -1)">-</button>
                               <input type="number" class="quantity-input" id="quantity-1" value="1" min="1" onchange="updateQuantity(1, 0)">
                               <button class="quantity-btn plus" onclick="updateQuantity(1, 1)">+</button>
                           </div>
                       </div>
                       <div class="cart-col product-total" id="total-1">￥5688</div>
                       <div class="cart-col product-action">
                           <button class="delete-btn" onclick="removeItem(1)">删除</button>
                       </div>
                   </div>
                   
                   <!-- 购物车商品项 2 -->
                   <div class="cart-item">
                       <div class="cart-col product-info">
                           <img src="images/goods/samsung.jpg" alt="三星手机" class="product-img">
                           <div class="product-name">三星 Galaxy S21 Ultra 5G 12GB+256GB</div>
                       </div>
                       <div class="cart-col product-price">￥8999</div>
                       <div class="cart-col product-quantity">
                           <div class="quantity-control">
                               <button class="quantity-btn minus" onclick="updateQuantity(2, -1)">-</button>
                               <input type="number" class="quantity-input" id="quantity-2" value="2" min="1" onchange="updateQuantity(2, 0)">
                               <button class="quantity-btn plus" onclick="updateQuantity(2, 1)">+</button>
                           </div>
                       </div>
                       <div class="cart-col product-total" id="total-2">￥17998</div>
                       <div class="cart-col product-action">
                           <button class="delete-btn" onclick="removeItem(2)">删除</button>
                       </div>
                   </div>
                   
                   <!-- 购物车商品项 3 -->
                   <div class="cart-item">
                       <div class="cart-col product-info">
                           <img src="images/goods/huawei.jpg" alt="华为手机" class="product-img">
                           <div class="product-name">华为 HUAWEI P50 Pro 8GB+256GB</div>
                       </div>
                       <div class="cart-col product-price">￥6488</div>
                       <div class="cart-col product-quantity">
                           <div class="quantity-control">
                               <button class="quantity-btn minus" onclick="updateQuantity(3, -1)">-</button>
                               <input type="number" class="quantity-input" id="quantity-3" value="1" min="1" onchange="updateQuantity(3, 0)">
                               <button class="quantity-btn plus" onclick="updateQuantity(3, 1)">+</button>
                           </div>
                       </div>
                       <div class="cart-col product-total" id="total-3">￥6488</div>
                       <div class="cart-col product-action">
                           <button class="delete-btn" onclick="removeItem(3)">删除</button>
                       </div>
                   </div>
               </div>
               
               <div class="cart-summary">
                   <div class="cart-total">
                       <span>总计：</span>
                       <span class="total-price" id="cart-total-price">￥30174</span>
                   </div>
                   <button class="checkout-btn" onclick="checkout()">立即支付</button>
               </div>
           </div>
        </div>
    </div>

    <div class="footer">
        <p class="links">
            <a href="">关于我们</a>|<a href="">常见问题</a>|<a href="">安全交易</a>|<a href="">购买流程</a>|<a
                href="">如何付款</a>|<a href="">联系我们</a>|<a href="">合作提案</a>
        </p>
        Copyright 蜗牛学苑© 2015-2024 <a class="copyys" target="_blank" href="">蜀ICP备01000010号</a>
    </div>
</div>
</body>
<script>
    // 购物车功能
    // 更新商品数量
    function updateQuantity(itemId, change) {
        const quantityInput = document.getElementById(`quantity-`+itemId);
        let newQuantity = parseInt(quantityInput.value);

        if (change !== 0) {
            newQuantity += change;
        } else {
            newQuantity = parseInt(quantityInput.value);
        }

        // 确保数量至少为1
        if (newQuantity < 1) {
            newQuantity = 1;
        }

        quantityInput.value = newQuantity;

        // 更新小计
        updateItemTotal(itemId);

        // 更新购物车总价
        updateCartTotal();
    }

    // 更新单个商品小计
    function updateItemTotal(itemId) {
        var id = "quantity-"+itemId;
        const quantity = parseInt(document.getElementById(id).value);
        const priceText = document.querySelector("#total-"+itemId).previousElementSibling.previousElementSibling.textContent;
        const price = parseFloat(priceText.replace('￥', ''));

        const total = quantity * price;
        document.getElementById(`total-`+itemId).textContent = `￥`+total;
    }

    // 更新购物车总价
    function updateCartTotal() {
        let totalPrice = 0;

        // 获取所有商品小计并求和
        const totalElements = document.querySelectorAll('[id^="total-"]');
        totalElements.forEach(element => {
            const priceText = element.textContent;
            const price = parseFloat(priceText.replace('￥', ''));
            totalPrice += price;
        });

        document.getElementById('cart-total-price').textContent = `￥`+totalPrice;
    }

    // 删除商品
    function removeItem(itemId) {
        const item = document.querySelector(`#quantity-`+itemId).closest('.cart-item');
        item.remove();

        // 更新购物车总价
        updateCartTotal();
    }

    // 结算
    function checkout() {
        alert('正在跳转到支付页面...');
        // 这里可以添加跳转到支付页面的代码
         window.location.href = '/order/submit';
    }
</script>
</html>
